<template>
  <div class="root">
    <!--  知识图谱绘制元素  -->
    <graph-component
      ref="graphComponent"
      :kgId="Number(this.$route.params.id)"
      @kgLoaded = "kgLoaded"
    />
    <el-table
      v-if="dtp"
      :data="this.KG.kgInfo.visibleLinks"
      style="width: 100%"
    >
      <el-table-column prop="s_label" label="Resources" width="180">
      </el-table-column>
      <el-table-column prop="predicate" label="Predicate" width="180">
      </el-table-column>
      <el-table-column prop="o_label" label="Value"> </el-table-column>
    </el-table>

    <!--  导航  -->
    <div class="options">
      <div class="item">
        <el-button
          title="主页"
          class="el-button item home"
          slot="reference"
          v-on:click="jumpToHome"
        >
          <i class="el-icon-house unhover"></i>
          <i class="el-icon-s-home hover"></i>
        </el-button>
      </div>
      <div title="用户" class="item user">
        <el-popover>
          <div class="item">
            <el-tag
              class="username"
              type="plain"
              style="width: 100%;text-align: center"
              >{{ user.username }}</el-tag
            >
          </div>
          <el-button class="el-button item home" slot="reference">
            <i class="el-icon-user unhover"></i>
            <i class="el-icon-user-solid hover"></i>
          </el-button>
        </el-popover>
      </div>
      <div title="更多操作" class="item more">
        <el-popover class="more-popover" placement="top">
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-edit-outline"
              @click="switchEditor('editBase')"
            >
              <b :hidden="!visible.editor.editBase">基础编辑器</b
              ><span :hidden="visible.editor.editBase">基础编辑器</span>
            </el-button>
          </div>
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-help"
              @click="switchEditor('editSingleNode')"
            >
              <b :hidden="!visible.editor.editSingleNode">单节点编辑器</b
              ><span :hidden="visible.editor.editSingleNode">单节点编辑器</span>
            </el-button>
          </div>
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-tickets"
              @click="switchEditor('editType')"
            >
              <b :hidden="!visible.editor.editType">类型编辑器</b
              ><span :hidden="visible.editor.editType">类型编辑器</span>
            </el-button>
          </div>

          <div class="options-divider" style="height: 1px;background-color: #66b1ff"></div>

          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-map-location"
              v-on:click="zoomToStart"
            >回到开始位置</el-button
            >
          </div>
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-location-outline"
              v-if="!fixed"
              v-on:click="switchFixFree"
              >固定所有节点
            </el-button>
            <el-button
              size="medium"
              type="text"
              icon="el-icon-location"
              v-if="fixed"
              v-on:click="switchFixFree"
              >释放所有节点
            </el-button>
          </div>
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-folder"
              @click="visible.history_drawer = true"
            >历史操作</el-button
            >
          </div>

          <div class="options-divider" style="height: 1px;background-color: #66b1ff"></div>

          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-data-analysis"
              @click="visible.statisticsKg = true"
            >图谱统计数据</el-button
            >
          </div>

          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-picture-outline-round"
              @click="visible.exportKg = true"
              >导出知识图谱</el-button
            >
          </div>
          <div class="item">
            <el-button
              size="medium"
              type="text"
              icon="el-icon-folder-add"
              v-on:click="wantSaveArrangement"
              >保存当前布局</el-button
            >
          </div>



<!--          <div class="item">-->
<!--            <el-button-->
<!--              size="medium"-->
<!--              type="text"-->
<!--              icon="el-icon-view"-->
<!--              v-if="dtp"-->
<!--              v-on:click="switchView"-->
<!--            >-->
<!--              切换力导图模式-->
<!--            </el-button>-->

<!--            <el-button-->
<!--              size="medium"-->
<!--              type="text"-->
<!--              icon="el-icon-view"-->
<!--              v-if="!dtp"-->
<!--              v-on:click="switchView"-->
<!--            >-->
<!--              切换排版模式-->
<!--            </el-button>-->
<!--          </div>-->
          
          <div class="item">
            <el-button size="medium" type="text" icon="el-icon-setting"
              >所有设置</el-button
            >
          </div>
          <el-button class="el-button" slot="reference">
            <i class="el-icon-more-outline unhover"></i>
            <i class="el-icon-more hover"></i>
          </el-button>
        </el-popover>
      </div>
      <div title="撤回" class="item user" v-if="this.KG!=null && this.KG.kgInfo.historyList.length > 0">
        <el-button
          class="el-button item withdraw"
          slot="reference"
          @click="withdraw"
        >
          <i class="el-icon-arrow-left unhover"></i>
          <i class="el-icon-d-arrow-left hover"></i>
        </el-button>
      </div>
    </div>

    <div v-if="this.KG !== null">
      <!--  短历史记录组件  -->
      <short-history-component />
      <!--  历史记录抽屉  -->
      <el-drawer
        :visible.sync="visible.history_drawer"
        :show-close="false"
        :withHeader="false"
        direction="rtl"
      >
        <total-history-component v-if="visible.history_drawer" />
      </el-drawer>
      <!--  基础编辑器组件  -->
      <transition name="el-fade-in-linear">
        <edit-base-component v-if="visible.editor.editBase" />
      </transition>
      <!--  类型编辑器组件  -->
      <transition name="el-fade-in-linear">
        <type-base-component v-if="visible.editor.editType" />
      </transition>
      <!--  单节点编辑器组件  -->
      <transition name="el-fade-in-linear">
        <edit-single-node-component v-if="visible.editor.editSingleNode" />
      </transition>
      <!--  导出知识图谱组件  -->
      <div v-if="visible.exportKg">
        <el-dialog
          title="导出知识图谱"
          style="text-align: left"
          :visible.sync="visible.exportKg"
          width="30%"
        >
          <export-kg-component />
        </el-dialog>
      </div>
      <!--  知识图谱统计数据  -->
      <div v-if="visible.statisticsKg">
        <el-dialog
          title="知识图谱统计"
          :visible.sync="visible.statisticsKg"
          style="text-align: left"
          width="50%"
        >
          <statistics-kg-component />
        </el-dialog>
      </div>
      <!--  节点信息查看组件  -->
      <view-node-component v-if="viewNodeEnable" :KG="KG" />
    </div>

  </div>
  <!--root end-->
</template>

<script>
import graphComponent from "@/views/kgeditor/components/graph/graphComponent";
import editBaseComponent from "@/views/kgeditor/components/editBase/editBaseComponent";
import typeBaseComponent from "@/views/kgeditor/components/editType/typeBaseComponent";
import editSingleNodeComponent from "@/views/kgeditor/components/editSingleNode/editSingleNodeComponent";
import exportKgComponent from "@/views/kgeditor/components/options/exportKgComponent";
import statisticsKgComponent from "@/views/kgeditor/components/options/statisticsKgComponent";
import viewNodeComponent from "@/views/kgeditor/components/viewNode/viewNodeComponent";
import shortHistoryComponent from "@/views/kgeditor/components/history/shortHistoryComponent";
import totalHistoryComponent from "@/views/kgeditor/components/history/totalHistoryComponent";
import StatisticsKgComponent from "@/views/kgeditor/components/options/statisticsKgComponent";
import TotalHistoryComponent from "@/views/kgeditor/components/history/totalHistoryComponent";

import { saveArrangementAPI } from "@/api/kgeditor/elementeditor";
import { withdrawAPI } from "@/api/kgeditor/withdraw";
import { getCurrengUser } from "../../api/identify/identify";
// const columns = [
//   {
//     dataIndex: 's_label',
//     key: 's_label',
//     slots: { title: 'customTitle' },
//     scopedSlots: { customRender: 'Resources' },
//   },
//   {
//     title: 'Predicate',
//     dataIndex: 'predicate',
//     key: 'predicate',
//   },
//   {
//     title: 'Value',
//     dataIndex: 'o_label',
//     key: 'o_label',
//   },
// ];
export default {
  name: "KgEditor",
  components: {
    TotalHistoryComponent,
    StatisticsKgComponent,
    graphComponent,
    exportKgComponent,
    statisticsKgComponent,
    editBaseComponent,
    typeBaseComponent,
    editSingleNodeComponent,
    viewNodeComponent,
    shortHistoryComponent,
    totalHistoryComponent
  },
  data() {
    return {
      KG: null,
      user: {},
      visible: {
        editor: {
          editBase: true,
          editType: false,
          editSingleNode: false
        },
        exportKg: false,
        statisticsKg: false,
        history_drawer: false
      },
      fixed: false, //是否被固定
      viewNodeEnable: true, //viewNode模块是否启用
      dtp: false //是否为排版模式
    };
  },
  created() {
    getCurrengUser(
      res => {
        this.user = res;
      },
      errorMessage => {
        this.$message.error("获取用户信息失败:" + errorMessage);
      }
    );
  },
  methods: {
    kgLoaded() {
      this.KG = this.$refs.graphComponent.KG;
    },
    jumpToHome() {
      this.$router.push({ path: "/" });
    },
    switchFixFree() {
      this.fixed ? this.KG.freeAll() : this.KG.fixAll();
      this.fixed = !this.fixed;
    },
    switchView() {
      if (this.dtp) {
        console.log("切换力导图模式");
        this.dtp = !this.dtp;
      } else {
        console.log("切换排版模式");
        this.dtp = !this.dtp;
      }
    },
    switchEditor(switchTo) {
      let arr = this.visible.editor;
      for (let key in arr) {
        arr[key] = false;
      }
      arr[switchTo] = true;
    },
    withdraw() {
      if (this.KG.kgInfo.historyList.length == 0) {
        this.$message.warning("目前还没有任何历史记录");
        return;
      }
      withdrawAPI(
        {
          kgID: this.KG.kgInfo.id
        },
        () => {
          this.KG.withdrawHistory();
          this.$message.success("撤回成功");
        },
        error => {
          this.$message.error("撤回失败:" + error);
        },
        () => {}
      );
    },
    wantSaveArrangement() {
      let _this = this;
      this.$confirm(
        "此操作会保存所有节点位置信息(包括未固定和隐藏的节点),是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          _this.saveArrangement();
        })
        .catch();
    },
    saveArrangement() {
      let _this = this;
      this.KG.freeAll();
      this.fixed = true;
      let nodesPositionArr = [];
      this.KG.kgInfo.nodes.forEach(function(node) {
        nodesPositionArr.push({
          id: node.uuid,
          hor: node.x,
          ver: node.y
        });
      });
      let saveArrangementMessage = this.$message({
        duration: 0,
        iconClass: "el-icon-loading",
        message: "正在存储"
      });
      saveArrangementAPI(
        {
          kgID: _this.KG.kgInfo.id,
          nodesArr: nodesPositionArr
        },
        function() {
          saveArrangementMessage.close();
          _this.$message.success("存储成功");
        },
        function(error) {
          saveArrangementMessage.close();
          _this.$message.error("存储失败:" + error);
        }
      );
    },
    zoomToStart() {
      this.KG.zoomToStart();
    }
  }
};
</script>

<style>
#gid .mengceng {
  position: absolute;
  left: 0;
  top: 0;
}
.mytable {
  background: white;
}
.divider {
  height: 0.5px;
  background-color: #c8c8c8;
}

.options {
  position: absolute;
  right: 15px;
  top: 15px;
  /*padding: 10px;*/
  width: 200px;
  /*border: 1px solid #c8c8c8;*/
  border-radius: 5px;
}
.options .item {
  float: right;
  margin-left: 10px;
}
.options .item i {
  /*background-color: #409eff;*/
  padding-top: 6px;
  height: 100%;
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  color: #909399;
}
.options .item .el-button {
  margin: 0;
  padding: 0;
  height: 35px;
  width: 35px;
  border: 1.5px solid #909399;
  border-radius: 50%;
  background-color: #f2f6fc;
}
.options .item .el-button:hover .hover,
.options .item .el-button .unhover {
  display: block;
}
.options .item .el-button .hover,
.options .item .el-button:hover .unhover {
  display: none;
}

.options .home i {
  padding-top: 5px;
}

.options >>> .more-popover .item {
  height: 100px;
  background-color: #2c3e50;
}
</style>
